<template>
    <!-- 普通支付订单 -->
    <div class="ordinaryOrder" v-loading="loading" >
        <!-- 导航 -->
        <tz-breadcrumb  :pathArr='[{"name": "首页"},{"name": "网商银行入驻", "url": "/bank-list"}]'></tz-breadcrumb>
        <form class="form" autocomplete="off" @submit.prevent="onSubmit" action="https://www.baidu.com">
            <div class="form-item">
                <label for="">合作方机构号</label>
                <el-input class="form-input" clearable v-model="IsvOrgId" size="medium"></el-input>
            </div>
            <div class="form-item">
                <label for="">申请单号</label>
                <el-input class="form-input" clearable v-model="OrderNo" size="medium"></el-input>
            </div>
            <div class="form-item">
                <el-button type="primary" size='medium' native-type='submit'>搜索</el-button>
            </div>
        </form>
        <el-card v-if="failReason !== ''">
          <div >
            {{failReason}}
          </div>
        </el-card>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
// import { msToDate } from './../../controller/common';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  mounted: function () {
    // this.initdata();
  },
  data: function () {
    return {
      // 加载
      loading: false,
      // 失败原因
      failReason: '',
      // 合作方机构号
      IsvOrgId: '',
      // 申请单号
      OrderNo: ''
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    onSubmit: function () {
      let that = this;
      if (that.OrderNo === '') {
        that.$message.error('申请单号不能为空');
        return false;
      }
      that.loading = true;
      // that.page = 1;
      http.get(api.shoppinGunitQuery, {
        IsvOrgId: that.IsvOrgId,
        OrderNo: that.OrderNo
      }, response => {
        console.log(response);
        that.loading = false;
        if (response.code === '10001') {
          if (response.data[0].register_status === '1') {
            this.$alert('入驻网商银行成功', '', {
              confirmButtonText: '确定',
              callback: action => {
                // this.$message({
                //   type: 'info',
                //   message: `action: ${action}`
                // });
              }
            });
          } else if (response.data[0].register_status === '0') {
            this.$alert('人工审核中', '', {
              confirmButtonText: '确定',
              callback: action => {
                // this.$message({
                //   type: 'info',
                //   message: `action: ${action}`
                // });
              }
            });
          } else {
            this.$alert('网商银行入驻失败', '', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
            that.failReason = response.data[0].fail_reason;
          }
        } else {
          that.loading = false;
          that.$message.error(response.msg);
        }
      }, () => {
        console.log('网络错误');
        that.loading = false;
        that.$message.error('网络错误，请稍后再试');
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding: 2rem;
  margin-top: 15px;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 1px 1px #999;

  .form-item
    display: inline-block;
    margin-right: 35px;

    label
      margin-right: 4rem;
      font-size: 14px;
      color: #333;

    .form-input
      max-width: 15rem;

  .line
    height: 4.5rem;

.demo-table-expand
  font-size: 0;

  label
    width: 90px;
    color: #99a9bf;

  .el-form-item
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
.mb20
  margin-bottom:20px
</style>
